<template>
  <div>
    <div ref="container" class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in list" :key="item.id" class="swiper-slide">
          <div class="swiper-slide_item">
            <img src="@/assets/imgs/item_color_blue_num.png">
            <img src="@/assets/imgs/item_color_blue_left.png">
            <img src="@/assets/imgs/item_color_blue_right.png">
            <div class="item_content flex flex-align-center flex-pack-justify">
              <div class="item_content_left">
                <div class="border_circle"/>
                <div class="padding_circle"/>
                <div class="content_circle">
                  <img src="@/assets/imgs/p5.png">
                </div>
              </div>
              <div class="item_content_right">
                <span>张付印</span>
                <span>河南</span>
                <span>成功下款:</span>
                <span>&nbsp;&nbsp;33万元</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div ref="page" class="swiper-pagination"/>
    </div>
    <div class="user_story">
      <ul>
        <li class="user_story_item0" style="display: list-item;">
          大学时候帮家里筹钱治病，当时整个家庭都困难，有过几次逾期，征信就留下了污点。现在出校门了各类消费需求很多，虽然未来的收入比较可观，但燃眉之急还是要解决。后面偶然在网上找到蚂蚁借，他们帮我找了能下款的产品，我觉得付出点费用也值得。
        </li>
        <li class="user_story_item1" style="display: none;">
          两个月前我用自己名字帮朋友在网上借钱，他没有按时还，导致把我坑了，别人说至少要半年才能把不良记录慢慢恢复。最近打算旅游，预算大概5万元，就尝试在蚂蚁借支付服务费提交申请，最后果然帮我找到了合的贷款平台。
        </li>
        <li class="user_story_item2" style="display: none;">
          我们是几个同事出来创业，启动资金还差一部分，在身边资金都筹集得七七八八之后，就通过网络渠道去凑钱，其中蚂蚁借成功帮我们解决了20万元的资金缺口。
        </li>
        <li class="user_story_item3" style="display: none;">
          我是那种比较能花钱的人，毕业两年虽然收入过万，但基本都是月光。上个月突然想买个品牌包…包治百病嘛！信用卡审批太慢，就打算直接在网上找了。找到的时候，觉得他们这样的服务方式比较靠谱，就支付服务了，最后贷到了1.1万元，这样总比自己到处瞎找要好嘛。
        </li>
        <li class="user_story_item4" style="display: none;">
          我去年技校毕业就来到广东这边的工厂打工。工厂的生活是比较单调的，但我比较幸运吧，找到了一个女朋友，这样很自然各方面花销就多起来了。工厂之前没有交社保公积金这些，这样很多贷款都不好批，所以我面找到蚂蚁借来帮我做方案，最后拿到了33万元的贷款，买了房娶了媳妇，还款起来也比较方便。
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
export default {
  name: 'Swiper',
  data() {
    return {
      list: [
        {
          id: 1,
          color: 'yellow',
          name: ''
        },
        {
          id: 2,
          color: 'red',
          name: '',
          story: ''
        },
        {
          id: 3,
          color: 'green',
          name: '',
          story: ''
        },
        {
          id: 4,
          color: 'purple',
          name: '',
          story: ''
        },
        {
          id: 5,
          color: 'blue',
          name: '',
          story: ''
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initSwiper()
    })
  },
  methods: {
    initSwiper() {
      const { container, page } = this.$refs
      this.swiper = new Swiper(container, {
        pagination: {
          el: page
        },
        effect: 'coverflow',
        slidesPerView: 1,
        centeredSlides: true,
        slidesPerView: 'auto',
        slideShadows: 'false',
        coverflow: {
          rotate: 0,
          stretch: -60,
          depth: 300,
          modifier: 1
        },
        initialSlide: 2,
        autoplay: 2000
      })
    }
  }
}
</script>
<style lang="less" scoped>
    .swiper-slide{
        // border: 1px solid red;
        width: 80%;
        height: 140px;
        border-radius: 10px;
        background-color: #ffffff;
        overflow: hidden;
    }
    .swiper-slide_item {
        // height: 140px;
        width: 100%;
        height: 100%;
        position: relative;
    }
    .swiper-slide_item>img:nth-child(1){
        width: 37px;
        height: 40px;
        position: absolute;
        top: 0;
        left: 20px;
    }
    .swiper-slide_item>img:nth-child(2){
        width: 175px;
        height: 48px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .swiper-slide_item>img:nth-child(3){
        width: 160px;
        height: 41px;
        position: absolute;
        top: 0;
        right:0;
    }
    .swiper-pagination-bullet{
        opacity: 0.3;
        background-color:rgb(254,115,39);
        // bottom: 10px;
        // left: 0;
        // width: 100%;
    }
    .swiper-pagination-bullet-active{
        opacity: 1;
        background: #fe7327;
    }
    .item_content{
        position: absolute;
        left: 36px;
        top: 40px;
        display: flex;

    }
    .item_content_left,.border_circle{
        width: 72px;
        height: 72px;
    }
    .item_content_left{
        position: relative;
        margin-right: 20px;
    }
    .border_circle{
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        background-color: rgba(254,127,64,0.2);
    }
    .padding_circle{
        width: 66px;
        height: 66px;
        position: absolute;
        border-radius: 50%;
        margin:3px 3px;
        background-color: rgba(254,127,164,0.3);
    }
    .content_circle{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        position: absolute;
        margin:6px 6px;
        overflow: hidden;
    }
    .content_circle img{
        width: 100%;
        height: 100%;
    }
    .item_content_right>span:first-child{
        font-size: 14.4px;
        color: #333333;
    }
    .item_content_right>span:not(:first-child){
        font-size: 12.8px;
        color: #666666;
    }
    .item_content_right>span:last-child{
        color: #fe7327;
    }
    .item_content_right>span:nth-child(1),.item_content_right>span:nth-child(2){
        display: block;
    }
    .item_content_right>span:nth-child(2){
        padding:14.4px 0 12.8px 0;
    }
    .user_story{
        width: 100%;
        position: relative;
        font-size: 13px;
        color: #333333;
        line-height: 1.5;
        background-color: #ffffff;
        >ul{
            width: 73.6%;
            position: relative;
            margin: 0 auto;
            list-style: none;
            padding: 0;
        }
    }
</style>
